<template>
    <div class="workList">
            <el-table :data="tableData" v-loading="loading" borderstyle="width: 100%">
            <el-table-column prop="id" label="用户Id" align="center"></el-table-column>
            <el-table-column prop="userId" label="所属班级" align="center"> </el-table-column>
            <el-table-column prop="title" label="作业名称" align="center"></el-table-column>
           <el-table-column prop="completed_text" label="完成情况" align="center"></el-table-column>
        </el-table>

        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 20, 50,100]"
        :page-size="size"
         layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
</template>


<script>
import { getTableData } from '@/utils/table';

export default{
    data(){
        return {
            tableData:[],
            total:0,
            page:1,
            size:10,
            loading:true
        }
    },
    created(){
        getTableData(this,'/works',{size:this.size,page:this.page},['completed'])
    },
    methods:{
        //更改页面大小
        handleSizeChange(val) {
       this.size=val  //每页显示信息条数为val
       this.page=1 //页码数重置为1
        getTableData(this,'/works',{size:this.size,page:this.page},['completed'])//重新获取表格数据
      },
      //更改页码数
      handleCurrentChange(val) {
       this.page=val
        getTableData(this,'/works',{size:this.size,page:this.page},['completed'])////重新获取表格数据
      },
    }
}
</script>

<style lang="scss">
.workList{
    .el-pagination{
        text-align: left;
        margin-top: 20px;
    }
}
</style>
